<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <table border="1px" width="800px">
            <tr>
                <th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>手机</th><th>住址</th>
            </tr>
            <tr v-for="stu in students">
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
                <td>{{stu.cellphone}}</td>
                <td>{{stu.address}}</td>
            </tr>
        </table>
    </div>
    <!--    导入vue的js文件-->
    <script src="js/vue.min.js"></script>
    <!--    导入axios文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //创建Vue
        new Vue({
            el: '#app',
            data: {
                students: [] //学生集合
            },
            methods:{
                //连接后台，加载学生数据
                loadStudents(){
                    //调用axios方法 get\post\delete\put 向后台发出请求
                    //then是处理数据
                    axios.get('http://localhost:8080/findStudents')
                        .then(result => {
                            console.log(result.data)
                            if(result.data.data){
                                //绑定后台的数据到前面的模型中
                                this.students = result.data.data;
                            }
                        });
                }
            },
            //组件挂载完成后调用加载学生方法
            mounted() {
                this.loadStudents();
            }
        })
    </script>
</body>
</html>